import React, { Component } from 'react';
import { NavBar, Carousel} from 'antd-mobile';
import './Index.scss'
// import myaxios from '../../utils/myaxios'
import SearchInput from '../../components/searchInput/searchInput'
import {withRouter} from 'react-router-dom'
// 引入连接器
import { connect } from 'react-redux'
import store from '../../store'
import {getIndexSwiperImg,getIndexClassify,getIndexImg} from '../../store/actionCreator'
class Index extends Component {
  componentDidMount() {
    //请求轮播图
    store.dispatch(getIndexSwiperImg())
    //请求首页分类
    store.dispatch(getIndexClassify())
  //请求图片列表
    store.dispatch(getIndexImg())
  }

  handleSwiper = (goods_id) => {
    this.props.history.push(`/shopDetail/${goods_id}`)
  }
  handleClassify = (params) => {
    this.props.history.push(`/classify`)
  }
  handleProduct = (params) => {
    let name = params.split("=")[1]
    console.log(name)
    this.props.history.push("/productList?query="+name)
  }
  
  render() {
    return (
      <div className='yg-index'>
        {/* 顶部导航开始 */}
        <div className='index-nav'>
          <NavBar className='index-nav-content'>优购商城</NavBar>
        </div>
        {/* 顶部导航结束 */}
        {/* 首页搜索框开始 */}
        <div className='searchInput'>
          <SearchInput></SearchInput>
        </div>
        {/* 首页搜索框结束 */}
        {/* 首页轮播图开始 */}
        <div className='index-swiper'>
          <Carousel
            autoplay={true}
            infinite
          >
            {this.props.swiperList.map(val => (
              <div onClick={this.handleSwiper.bind(this,val.goods_id)}
                key={val.goods_id}
                style={{ display: 'inline-block', width: '100%', height: this.props.imgHeight }}
              >
                <img
                  src={val.image_src}
                  alt=""
                  style={{ width: '100%', verticalAlign: 'top' }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event('resize'));
                    this.setState({ imgHeight: 'auto' });
                  }}
                />
              </div>
            ))}
          </Carousel>
        </div>
        {/* 首页轮播图结束 */}
        {/* 首页分类开始 */}
        <div className='index-classify'>
            {
              this.props.classifyList.map((v,i)=>{
                return(
                  <div onClick={this.handleClassify.bind(this)} key={v.name} className="index-classify-item">
                    <img src={v.image_src} alt={v.name}/>
                  </div>
                )
              })
            }
        </div>
        {/* 首页分类结束 */}
        {/* 首页图片列表开始 */}
        <div className='index-imgList'>
            {
              this.props.imgList.map((v,i)=>{
                return (
                  <div key={v.floor_title.image_src} className="index-imgList-item">
                    {/* 标题开始 */}
                     <div className='imgList-item-title'>
                     <img src={v.floor_title.image_src} alt={v.floor_title.name}/>
                     </div>
                    {/* 标题结束 */}
                    <div className='imgList-product'>{
                     v.product_list.map((vv)=>{
                          return <div key={vv.image_src} className='imgList-product-item'>
                            <img onClick={this.handleProduct.bind(this,vv.navigator_url)} src={vv.image_src} alt={vv.name}/>
                          </div>
                      })
                    }
                    </div>
                  </div>
                )
              })
            }
        </div>
        {/* 首页图片列表结束 */}
      </div>
    );
  }
}
//将store中的数据传递到 Index的props中
const mapStateToProps = (state) =>{
  return {
    imgHeight:state.indexReducer.imgHeight,
    swiperList:state.indexReducer.swiperList,
    classifyList:state.indexReducer.classifyList,
    imgList : state.indexReducer.imgList
  }
}
export default connect(mapStateToProps,null)(withRouter(Index));